import React, {Component} from 'react';
import './Singers.css';
import {musicClasses} from '../../static/data/lists';
import SingerList from "../../components/Singers/SingerList/SingerList";

class Singers extends Component {
	constructor(props) {
		super(props);
		// console.log(musicClasses);
		this.state = {
			music_classes: musicClasses || [], // 分类列表
			music_letters: this.getUpperLetters(), // 字母列表
			classes_index: null, // 分类列表下标
			letter_index: null, // 字母列表下标
			hasMoreList: false, // 还有更多列表
			singerList: [], // 歌手列表
			offset: 0, // 参数，已加载条数
			cat: '', // 参数，分类id
			initial: '', // 参数，首字母
		}
	}

	componentDidMount() {
		this.initialize.call(this);

	}

	// 点击菜单
	clickMenu(index, e) {
		// console.log(index, e);
		if (e.target.dataset.type === 'classes') {
			this.setState(state => {
				return {
					classes_index: index,
					cat: state.music_classes[index].id
				}
			}, () => {
				this.sieve();
			})
		} else {
			this.setState(state => {
				return {
					letter_index: index,
					initial: state.music_letters[index].toLowerCase()
				}
			}, () => {
				this.sieve();
			})
		}
	}

	// 初始化
	initialize() {
		this.$axios({
			url: '/top/artists',
			params: {
				offset: this.state.offset
			}
		}).then(res => {
			console.log(res);
			if (res.code === 200) {
				this.setState(state => {
					return {
						singerList: res.artists,
						hasMoreList: res.more
					}
				})
			}
		})
	}

	// 过滤
	sieve() {
		this.$axios({
			url: '/artist/list',
			params: {
				cat: this.state.cat,
				initial: this.state.initial,
				offset: this.state.offset,
			}
		}).then(res => {
			console.log(res);
			if (res.code === 200) {
				this.setState(state => {
					return {
						singerList: res.artists,
						hasMoreList: res.more
					}
				})
			}
		})
	}

	// 获取列表
	getList() {

	}

	//输出A-Z 26个大写字母
	getUpperLetters() {
		let letters = [];
		for (let i = 0; i < 26; i++) {
			letters.push(String.fromCharCode(65 + i));
		}
		return letters;
	}

	render() {
		return (
			<div className='singers'>
				<div className="subMenu">
					<div className="music_classes">
						<span className='title'>分类(默认热门)：</span>
						{this.state.music_classes.map((item, index) => <span
							className={this.state.classes_index === index ? 'classes selected' : 'classes'} data-type='classes'
							onClick={this.clickMenu.bind(this, index)} key={item.id}>{item.name}</span>)}
					</div>

					<div className="music_letters">
						<span className='title'>首字母：</span>
						{this.state.music_letters.map((item, index) => <span
							className={this.state.letter_index === index ? 'letters selected' : 'letters'} data-type='letters'
							onClick={this.clickMenu.bind(this, index)} key={item}>{item}</span>)}
					</div>
				</div>
				<SingerList singerList={this.state.singerList}/>

			</div>
		);
	}
}

export default Singers;